<script setup lang="ts">

const tabs = [{
  label: '全部',
  value: 'all',
  icon: 'icon-quanbu'
}/* , {
  label: '标签',
  value: 'tag',
  icon: 'icon-biaoqian'
}, {
  label: '报表',
  value: 'grid',
  icon: 'icon-yingshoubaobiao'
} */]

const sortMethod = [{
  label: '综合排序',
  value: '0'
}, {
  label: '最近更新',
  value: '1'
}, {
  label: '使用最多',
  value: '2'
}]

const activeRoll = ref(tabs[0].value)

const sortMethodValue = ref('0')

</script>
<template>
  <div class="px-8">
    <div class="py-4 flex items-center justify-between">
      <!-- 横向滚动列表 -->
      <HorizontalRoll v-model="activeRoll" class="flex-1 w-0 overflow-auto" :tabs="tabs" />
      <!-- 排序下拉 -->
      <div class="w-[180px] h-[42px]">
        <el-select v-model="sortMethodValue" class="w-full h-full">
          <el-option v-for="item in sortMethod" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.select-trigger), :deep(.select-trigger .el-input) {
  --el-select-input-focus-border-color: #F0F0F0;
  @apply w-full h-full;
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  @apply  rounded-lg overflow-hidden bg-[#F0F0F0] shadow-none hover:bg-[#EBEBEB] font-bold;
}
</style>
